<template>
  <div class="app-container">
    <div>
      <el-card shadow="never" class="table-container" title="基础信息">
        <el-button
          plain
          class="showDialogButton"
          type="warning"
          @click="showDialog = true"
        >
          <i-ep-setting class="mr-0" />
        </el-button>
        <el-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-width="100px"
          class="mt-[10px]"
          style="max-width: 90%"
        >
          <!-- 只读状态显示遮罩 -->
          <!-- <div v-if="props.isReadonly" class="formCover"></div> -->
          <el-form-item label="车载名称" prop="roleName" width="200px">
            <el-input
              v-model="formData.roleName"
              placeholder="请输入车载名称"
            />
          </el-form-item>
          <el-form-item label="时间">
            <el-col :span="11">
              <el-date-picker
                v-model="formData.date1"
                type="date"
                placeholder="请选择日期"
                style="width: 100%"
              />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-time-picker
                v-model="formData.date2"
                placeholder="请选择时间"
                style="width: 100%"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="车载类型">
            <el-checkbox-group v-model="formData.type">
              <el-checkbox label="Online activities" name="type" />
              <el-checkbox label="Promotion activities" name="type" />
              <el-checkbox label="Offline activities" name="type" />
              <el-checkbox label="Simple brand exposure" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="车载备注" prop="remarks">
            <el-input
              v-model="formData.remarks"
              placeholder="请输入车载备注"
              type="textarea"
              show-word-limit
              :maxlength="250"
              :autosize="{ minRows: 3, maxRows: 4 }"
            />
          </el-form-item>
          <el-form-item label="状态" prop="enabled">
            <el-radio-group v-model="formData.enabled">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="mt-[30px]">
            <el-button
              size="large"
              type="primary"
              :loading="loading"
              @click="handleSubmit"
              class="w-[65%]"
              >确 定</el-button
            >
            <el-button size="large" @click="resetForm" class="w-[30%]"
              >重 置</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <window-dialog
      :visible="showDialog"
      title="window弹窗宽度85%—居中—高度自适应"
      @change-visible="(e) => (showDialog = e)"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import request from "@/utils/request";
import router from "@/router";

defineOptions({
  name: "Window7Add",
  inheritAttrs: false,
});

/** 定义form信息 */
const rules = reactive({
  roleName: [
    { required: true, message: "请输入车载名称", trigger: "blur" },
    { max: 45, message: "车载名称不能超过45个字符", trigger: "blur" },
  ],
  remarks: [{ message: "请输入车载备注", trigger: "blur" }],
  enabled: [{ required: true, message: "请选择状态", trigger: "blur" }],
});

const formRef = ref(ElForm);

const initForm = {
  enabled: 1,
  remarks: "",
  roleName: "",
  id: "",
  type: [],
  date1: "",
  date2: "",
  delivery: true,
};
let formData = reactive(JSON.parse(JSON.stringify(initForm)));

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
}

const loading = ref(false);

/** 角色保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      try {
        loading.value = true;
        const text = formData.id ? "编辑" : "新增";
        await request({
          url: "/system/sysRole/save",
          method: "post",
          data: formData,
        });
        loading.value = false;
        ElMessage.success(`${text}成功`);
        router.go(-1);
      } catch (error) {
        loading.value = false;
      }
    } else {
      ElMessage({
        showClose: true,
        message: "请完善信息",
        type: "error",
      });
    }
  });
}

// 弹窗信息
const showDialog = ref(false);
</script>

<style lang="scss" scoped>
.app-container {
  .showDialogButton {
    position: absolute;
    right: 40px;
    top: 40px;
    padding: 8px 10px;
    svg {
      margin-right: 0;
    }
  }
}
</style>
